<template>
  <div class="container">
    <!-- <div class="app-container"> -->
      <el-card style="margin: 10px 10px">
        <!-- 题组管理 -->
        <el-row>
          <el-col>
            <span style="font-size: 12px; color: pink"
              >说明：目前支持学科和关键字条件筛选</span
            >
            <el-button
              class="button"
              icon="el-icon-edit"
              type="success"
              size="small"
              @click="$router.push('new')"
              >新增试题</el-button
            >
          </el-col>
        </el-row>
        <!-- 上部分form表单 -->
        <el-form ref="form" class="el-form">
          <!-- 1 -->
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item class="el-form-item" label="学科" label-width="80px">
                <el-select
                v-model="formData.subjectID"
                class="el-form-item-select"
                placeholder="请选择"
                @change="handleChange"
                >
                  <el-option
                  v-for="(item,index) in subjectList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="试题类型" label-width="80px">
                <el-select v-model="formData.questionType" class="el-form-item-select" placeholder="请选择">
                  <el-option
                  v-for="(item,index) in questionTypeList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="题目备注" label-width="80px">
                <el-input v-model="formData.remarks" style="width: 240px"></el-input>
              </el-form-item>
            </el-col>
            <!-- 2 -->
            <el-col :span="6">
              <el-form-item
                class="el-form-item"
                label="二级目录"
                label-width="80px"
              >
                <el-select
                v-model="formData.catalogID"
                @change="directoryChange"
                class="el-form-item-select"
                placeholder="请选择">
                  <el-option
                  v-for="(item,index) in directoryList"
                  :key="index"
                  :label="item.directoryName"
                  :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="难度" label-width="80px">
                <el-select v-model="formData.difficulty" class="el-form-item-select" placeholder="请选择">
                  <el-option
                  v-for="(item,index) in difficultyList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  ></el-option>

                </el-select>
              </el-form-item>
              <el-form-item label="企业简称" label-width="80px">
                <el-input v-model="formData.shortName" style="width: 240px"></el-input>
              </el-form-item>
            </el-col>
            <!-- 3 -->
            <el-col :span="6">
              <el-form-item class="el-form-item" label="标签" label-width="80px">
                <el-select v-model="formData.tags" class="el-form-item-select" placeholder="请选择">
                  <el-option
                  v-for="(item,index) in tagList"
                  :key="index"
                  :label="item.tagName"
                  :value="item.id"
                  ></el-option>

                </el-select>
              </el-form-item>
              <el-form-item label="方向" label-width="80px">
                <el-select v-model="formData.direction" class="el-form-item-select" placeholder="请选择">
                  <el-option
                  v-for="(v,k,i) in directionList"
                  :key="i"
                  :label="v"
                  :value="k"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="城市" label-width="80px">
                <el-select
                  style="width: 115px;margin-right:10px;"
                  v-model="formData.province"
                  placeholder="请选择"
                  @change="handleProvinceChange"
                >
                  <el-option
                  v-for="(item,index) in province"
                  :key="index"
                  :label="item"
                  :value="item"
                  ></el-option>
                </el-select>
                <el-select v-model="formData.city" style="width: 115px;" placeholder="请选择">
                  <el-option
                  v-for="(item,index) in citysList"
                  :key="index"
                  :label="item"
                  :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 4 -->
            <el-col :span="6">
              <el-form-item label="关键字" label-width="80px">
                <el-input v-model="formData.keyword" placeholder="根据题干搜索" style="width: 240px"></el-input>
              </el-form-item>
              <el-form-item label="录入人" label-width="80px">
                <el-select
                v-model="formData.creatorID"
                class="el-form-item-select"
                placeholder="请选择"
                >
                  <el-option
                  v-for="(item,index) in userList"
                  :key="index"
                  :label="item.username"
                  :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item style="float: right" label-width="80px">
                <el-button size="small" @click.native="hangdleRemoveForm">清除</el-button>
                <el-button size="small" type="primary" @click.native="handlefilter">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 弹框 -->
        <el-alert
          :title="`数据一共 ${counts} 条`"
          type="info"
          :closable="false"
          show-icon
        >
        </el-alert>
        <!-- 表格 -->
        <el-table :data="list" style="widht: 100%">
          <el-table-column prop="number" label="试题编号" width="130px"></el-table-column>
          <el-table-column prop="subject" label="学科" width="120px"></el-table-column>
          <el-table-column prop="catalog" label="目录" width="120px"></el-table-column>
          <el-table-column prop="questionType" label="题型" width="120px">
            <template #default={row}>
              <!-- {{row}} -->
              <span v-if="row.questionType === '1'">单选</span>
              <span v-else-if="row.questionType === '2'">多选</span>
              <span v-else>简答</span>
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干" width="230px">
            <template #default={row}>
              <span v-html="row.question"></span>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="200px">
            <template #default="{row}">
              <span>{{formDate(row.addDate)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" width="100px">
            <template #default={row}>
              <span v-if="row.difficulty === '1' ">简单</span>
              <span v-else-if="row.difficulty === '2'">一般</span>
              <span v-else>困难</span>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="120px"></el-table-column>
          <el-table-column label="操作" width="200px">
            <template #default={row}>
              <!-- 预览 -->
              <el-button
                title="预览"
                type="primary"
                icon="el-icon-view"
                circle
                plain
                @click="handlePreview(row.id)"
              ></el-button>
              <!-- 修改 -->
              <el-button
                title="修改"
                type="success"
                icon="el-icon-edit"
                circle
                plain
                @click="$router.push(`new?id=${row.id}`)"
              ></el-button>
              <!-- 删除 -->
              <el-button
                title="删除"
                type="danger"
                icon="el-icon-delete"
                circle
                plain
                @click="delBestList(row)"
              ></el-button>
              <!-- 加入精选 -->
              <el-button
                title="加入精选"
                icon="el-icon-check"
                type="warning"
                circle
                plain
                @click="handleChoiceAdd(row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
          <el-pagination
            style="float: right; margin: 15px 0"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="query.pagesize"
            layout="prev, pager, next, sizes, jumper"
            background
            :total="counts"
          >
          </el-pagination>
      </el-card>
    <!-- </div> -->
    <!-- 对话框 -->
    <question-preview
    :isShow.sync="isShow"
    :questionId="questionId"
    />
  </div>
</template>
<script>
import dayjs from 'dayjs'
// 基础题库列表/和删除列表
import { list, remove, choiceAdd } from '@/api/hmmm/questions.js'
// 城市区域
import { provinces, citys } from '@/api/hmmm/citys'
// 学科列表
import { simple } from '@/api/hmmm/subjects.js'
// 题型/难度/方向枚举
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
// 目录接口
import { list as reqlist } from '@/api/hmmm/directorys'
// 标签接口
import { list as reqTags } from '@/api/hmmm/tags'
// 用户列表
import { simple as user } from '@/api/base/users.js'
import questionPreview from '../components/questionPreview.vue'
export default {
  name: 'Questions',
  components: {
    questionPreview
  },
  data () {
    return {
      list: [],
      counts: 0, // 总条数
      query: {
        page: 1, // 当前页码
        pagesize: 5 // 页大小
      },
      // 区域列表
      citysList: [],
      // 城市列表
      province: provinces(),
      // form表单数据
      formData: {
        subjectID: '', // 学科
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签
        province: '', // 省份
        city: '', // 城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: '', // 录入人
        catalogID: '' // 二级目录
      },
      // 学科简单列表
      subjectList: [],
      // 试题类型
      questionTypeList: questionType,
      // 难度
      difficultyList: difficulty,
      // 获取二级目录
      directoryList: [],
      tagList: [],
      // 方向列表
      directionList: direction,
      // 录入人列表
      userList: [],
      // 处理弹框显示隐藏
      isShow: false,
      // 预览时传入的id
      questionId: null,
      baseList: []
    }
  },
  created () {
    // 获取学科简单列表
    this.getSubject()
  },
  mounted () {
    // 获取基础题库列表
    this.getBestList()
    // 获取录入人列表
    this.getUserList()
  },
  methods: {
    // 获取基础题库列表
    async getBestList () {
      // const res = await list(this.query)
      // console.log(res)
      const { data: { counts, items } } = await list(this.query)
      // console.log(counts)
      // 总条数
      this.counts = counts
      this.list = items
      // console.log(items)
      this.baseList = items
      // console.log(this.formData, '11')
    },
    // 删除基础题库列表
    delBestList (row) {
      // console.log(id)
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', { type: 'warning' }).then(async () => {
        const res = await remove(row)
        this.$message.success('删除成功')
        console.log(res)
        // 不是第一页, 并且当前页列表中的数据只有一条
        if (this.list.length === 1 && this.query.page > 1) {
          this.query.page--
        }
        this.getBestList()
      }).catch((e) => {
        console.log(e, '取消')
      })
    },
    // 处理加入精选
    handleChoiceAdd (id) {
      // console.log(id)
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', { type: 'info' })
        .then(async () => {
          await choiceAdd({ id, choiceState: 1 })
          this.$message.success('加入精选成功')
          // 重新渲染表格
          this.getBestList()
        }).catch(() => {
          console.log('取消')
        })
    },
    // 处理点击预览
    handlePreview (id) {
      // console.log(id)
      this.isShow = true
      this.questionId = id
      console.log(this.questionId)
    },
    // 页码变化
    handleSizeChange (val) {
      this.query.pagesize = val
      this.query.page = 1
      this.getBestList()
    },
    // 切换页码
    handleCurrentChange (val) {
      this.query.page = val
      this.getBestList()
    },
    // 处理日期格式
    formDate (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },
    // 获取学科简单列表
    async getSubject () {
      const { data } = await simple(this.subjectList)
      // console.log(data, '1111')
      this.subjectList = data
    },
    // 学科变化是触发
    async handleChange (val) {
      // console.log(val, '========')
      const res = await reqlist({ subjectID: val })
      // console.log(res, '=====')
      this.directoryList = res.data.items
      this.tagList = []
    },
    // 点击目录时触发
    directoryChange () {
      this.getTagsList()
    },
    // 获取标签列表
    async getTagsList () {
      const res = await reqTags({ subjectID: this.formData.subjectID })
      console.log(res, 'tags')
      this.tagList = res.data.items
    },
    // 获取录入人列表
    async getUserList () {
      const res = await user()
      // console.log(res, '222222222')
      this.userList = res.data
    },
    // 点击城市时触发
    handleProvinceChange (value) {
      // console.log(value)
      this.citysList = citys(value)
      // console.log(this.citysList)
    },
    // 点击清除form表单
    hangdleRemoveForm () {
      this.formData = {
        subjectID: '', // 学科
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签
        province: '', // 省份
        city: '', // 城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: '', // 录入人
        catalogID: '' // 二级目录
      }
    },
    // 筛选
    async handlefilter () {
      const obj = {}
      if (this.formData.subjectID) {
        obj.subjectID = this.formData.subjectID
      }
      if (this.formData.keyword) {
        obj.keyword = this.formData.keyword
      }
      const res = await list(obj)
      console.log(res)
      this.list = res.data.items
      this.counts = res.data.counts
    }

  }
}
</script>

<style scoped lang="scss">
.container {
  .button {
    float: right;
    // height: 40px;
    margin-bottom: 10px;
    // background-color: pink;
  }
  .el-form {
    // display: flex;
    .el-form-item {
      height: 30px;
      .el-form-item-select {
        width: 240px;
      }
    }
  }
}
</style>
